<template>
  <s-layout>
    <fui-swiper-dot :items="detailData.images" :current="current">
      <swiper class="banner-wrap" circular autoplay @change="onChange">
        <swiper-item v-for="(img, index) in detailData.images" :key="index">
          <image class="banner-image" :src="img" mode="aspectFill" />
        </swiper-item>
      </swiper>
    </fui-swiper-dot>
    <!-- <fui-tag
      :text="detailData.status"
      shape="circleRight"
      style="
        position: absolute;
        right: 0;
        top: 30rpx;
        border-radius: 30rpx 0 0 30rpx;
        background: linear-gradient(45deg, #2b85e4, #0052d9);
        color: #fff;
        padding: 12rpx 36rpx;
      "
    ></fui-tag> -->

    <!-- 主体内容 -->
    <view
      style="
        padding: 30rpx;
        background: #f8faff;
        margin-top: 0rpx;
        border-radius: 32rpx 32rpx 0 0;
      "
    >
      <!-- 标题区 -->
      <view
        style="
          margin-bottom: 40rpx;
          border-left: 8rpx solid #2979ff;
          padding-left: 20rpx;
        "
      >
        <text style="font-size: 40rpx; font-weight: 600; color: #1a1a1a">{{
          detailData.title
        }}</text>
        <view
          style="
            display: flex;
            align-items: center;
            gap: 20rpx;
            margin-top: 20rpx;
          "
        >
          <fui-tag
          :text="'3 学时'"
          style="
            transform: scale(0.9);
            background: #ecf5ff;
            color: #0052d9;
            border: none;
          "
        ></fui-tag>
          <!-- <text style="color: #4f4e4e; font-size: 26rpx">
            <text
              class="cicon-eye"
              style="color: #a0cfff; margin-right: 10rpx"
            ></text>
            已学习 {{ detailData.views }} 次
          </text> -->
        </view>
      </view>

      <!-- 关键信息 square高度自适应-->
      <fui-grid
        :square="false"
        :show-border="false"
        style="margin-top: 20rpx"
        :col="3"
      >
        <fui-grid-item>
          <view class="card" style="text-align: center">
            <text
              class="cicon-eye-favor"
              style="font-size: 48rpx; color: #2979ff"
            ></text>
            <text
              style="
                display: block;
                color: #4f4e4e;
                font-size: 28rpx;
                margin: 10rpx 0;
              "
              >培训日期</text
            >
            <text style="color: #1a1a1a; font-weight: 500">{{
              detailData.date
            }}</text>
          </view>
        </fui-grid-item>
        <fui-grid-item>
          <view class="card" style="text-align: center">
            <text
              class="cicon-time"
              style="font-size: 48rpx; color: #2979ff"
            ></text>
            <text
              style="
                display: block;
                color: #4f4e4e;
                font-size: 28rpx;
                margin: 10rpx 0;
              "
              >培训时长</text
            >
            <text style="color: #1a1a1a; font-weight: 500"
              >3 小时</text
            >
          </view>
        </fui-grid-item>
        <fui-grid-item>
          <view class="card" style="text-align: center">
            <text
              class="cicon-group"
              style="font-size: 48rpx; color: #2979ff"
            ></text>
            <text
              style="
                display: block;
                color: #4f4e4e;
                font-size: 28rpx;
                margin: 10rpx 0;
              "
              >参与人数</text
            >
            <text style="color: #1a1a1a; font-weight: 500">{{
              detailData.participants
            }}</text>
          </view>
        </fui-grid-item>
      </fui-grid>

      <!-- 视频模块 -->
      <view class="card video-list-container" v-if="detailData.videos && detailData.videos.length > 0">
        <fui-section
          title="培训视频"
          line-width="3px"
          line-color="linear-gradient(to bottom , #0052d9 70%, #ff9900 90%)"
          isLine
          size="34"
          padding="20rpx 0rpx"
          style="
            display: inline-block; /* 或 block */
            --fui-section-title-color: #1a1a1a;
            --fui-section-line-color: #19be6b;
            margin-bottom: 20rpx;
            width: 100%;
            height: 100%;
          "
        />
        <scroll-view class="video-scroll-view" scroll-x="true" show-scrollbar="false">
          <view class="video-item" v-for="(videoSrc, index) in detailData.videos" :key="index" style="width: 100%;">
            <video :src="videoSrc" controls :poster="videoSrc + '?vframe/jpg/offset/0'" style="width: 100%;"></video>
          </view>
        </scroll-view>
      </view>
      <view class="card video-list-container empty-video" v-else>
        <fui-section
          title="培训视频"
          line-width="3px"
          line-color="linear-gradient(to bottom , #0052d9 70%, #ff9900 90%)"
          isLine
          size="34"
          padding="10rpx 0"
          style="
            display: inline-block; /* 或 block */
            --fui-section-title-color: #1a1a1a;
            --fui-section-line-color: #19be6b;
            margin-bottom: 25rpx;
          "
        />
        <view class="empty-text">暂无视频</view>
      </view>

      

      <!-- 检查文件模块 -->
      <view class="check-box" style="margin-top: 30rpx;">
        <view class="check-box-border">
          <fui-section
            title="检查文件"
            line-width="3px"
            line-color="linear-gradient(to bottom , #0052d9 70%, #ff9900 90%)"
            isLine
            marginBottom="25"
            padding="10rpx 0"
            size="34"
            style="
              padding: 0;
              --fui-section-title-color: #1a1a1a;
              --fui-section-line-color: #19be6b;
            "
          ></fui-section>
          <view class="check-content file-list-container">
            <view v-if="detailData.files && detailData.files.length > 0">
              <view class="file-item" v-for="(fileUrlInArray, index) in detailData.files" :key="index" @click="openFile(fileUrlInArray)">
                <image :src="getFileIcon(extractFileTypeFromUrl(fileUrlInArray))" class="file-icon"></image>
                <text class="file-name">{{ extractFileNameFromUrl(fileUrlInArray) }}</text>
              </view>
            </view>
            <view v-else class="empty-files">
              <text>暂无检查文件</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 培训详情 -->
      <view
        style="
          background: #fff;
          border-radius: 16rpx;
          padding: 30rpx;
          margin-top: 30rpx;
          position: relative;
        "
      >
        <!-- 培训详情标题 -->
        <!-- <fui-section
        title="培训详情"
        line-width="3px"
        line-color="linear-gradient(to bottom , #0052d9 70%, #ff9900 90%)"
        isLine
        size="34"
        style="
          padding: 0;
          --fui-section-title-color: #1a1a1a;
          --fui-section-line-color: #19be6b;
        "
      /> -->

        <!-- 培训时间 -->
        <view
        style="
          display: flex;
          gap: 30rpx;
          margin: 40rpx 0;
          padding: 20rpx;
          background: #f8faff;
          border-radius: 12rpx;
        "
      >
        <view
          style="
            flex: 1;
            text-align: center;
            padding: 20rpx;
            background: linear-gradient(135deg, #a0cfff, #ecf5ff);
            border-radius: 8rpx;
          "
        >
          <text
            class="cicon-time"
            style="color: #0052d9; font-size: 48rpx"
          ></text>
          <view style="margin-top: 15rpx">
            <text style="display: block; color: #4f4e4e; font-size: 26rpx"
              >开始时间</text
            >
            <text style="color: #1a1a1a; font-weight: 500">{{
              detailData.startTime
            }}</text>
          </view>
        </view>
        <view
          style="
            flex: 1;
            text-align: center;
            padding: 20rpx;
            background: linear-gradient(135deg, #71d5a1, #e1f3e8);
            border-radius: 8rpx;
          "
        >
          <text
            class="cicon-time"
            style="color: #19be6b; font-size: 48rpx"
          ></text>
          <view style="margin-top: 15rpx">
            <text style="display: block; color: #4f4e4e; font-size: 26rpx"
              >结束时间</text
            >
            <text style="color: #1a1a1a; font-weight: 500">{{
              detailData.endTime
            }}</text>
          </view>
        </view>
      </view>

        <!-- 培训内容 -->
        <view
          style="
            margin: 30rpx 0;
            padding: 20rpx;
            border-left: 6rpx solid #a0cfff;
          "
        >
          <view
            style="
              display: flex;
              align-items: center;
              gap: 15rpx;
              margin-bottom: 20rpx;
            "
          >
            <text
              class="cicon-description"
              style="color: #0052d9; font-size: 40rpx"
            ></text>
            <text style="font-size: 32rpx; color: #1a1a1a; font-weight: 600"
              >课程主要内容</text
            >
          </view>
          <p
            style="
              text-indent: 2em;
              color: #4f4e4e;
              line-height: 1.8;
              margin: 0;
            "
          >
            {{ detailData.content }}
          </p>
        </view>

        <!-- 培训大纲 -->
        <!-- <view
          style="
            margin: 40rpx 0;
            border: 2rpx dashed #ecf5ff;
            border-radius: 12rpx;
            padding: 20rpx;
          "
        >
          <view
            style="
              display: flex;
              align-items: center;
              gap: 15rpx;
              margin-bottom: 25rpx;
            "
          >
            <text
              class="cicon-list-alt"
              style="color: #ff9900; font-size: 40rpx"
            ></text>
            <text style="font-size: 32rpx; color: #1a1a1a; font-weight: 600"
              >教学大纲</text
            >
          </view>
          <view
            v-for="(item, index) in detailData.outline"
            :key="index"
            style="
              display: flex;
              align-items: flex-start;
              gap: 15rpx;
              padding: 20rpx 0;
              border-bottom: 1rpx solid #f0f0f0;
            "
          >
            <text
              class="cicon-check"
              style="color: #19be6b; font-size: 36rpx"
            ></text>
            <text style="flex: 1; color: #4f4e4e">{{ item }}</text>
            <fui-tag
              :text="'章节' + (index + 1)"
              style="
                background: #f8faff;
                color: #4f4e4e;
                padding: 8rpx 20rpx;
                border-radius: 30rpx;
              "
            ></fui-tag>
          </view>
        </view> -->

        <!-- 考核要求 -->
        <!-- <view
          style="
            background: #fff;
            border-radius: 16rpx;
            padding: 30rpx;
            margin-bottom: 30rpx;
          "
        >
          <view
            style="
              display: flex;
              align-items: center;
              gap: 15rpx;
              margin-bottom: 25rpx;
            "
          >
            <text
              class="cicon-list-alt"
              style="color: #ff9900; font-size: 40rpx"
            ></text>
            <text style="font-size: 32rpx; color: #1a1a1a; font-weight: 600"
              >考核要求</text
            >
          </view>
          <view style="margin-top: 30rpx">
            <view
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20rpx;
              "
            >
              <text style="color: #4f4e4e">当前通过率</text>
              <text style="color: #19be6b; font-weight: 500"
                >{{ detailData.passRate }}%</text
              >
            </view>
            <fui-progress
              :percent="detailData.passRate"
              activeColor="#71d5a1"
              backgroundColor="#ecf5ff"
              style="height: 16rpx; border-radius: 8rpx"
            ></fui-progress>
            <view
              style="
                margin-top: 30rpx;
                padding: 20rpx;
                background: #f8faff;
                border-radius: 12rpx;
              "
            >
              <text
                class="cicon-info"
                style="color: #a0cfff; margin-right: 10rpx"
              ></text>
              <text style="color: #4f4e4e; font-size: 26rpx"
                >需完成所有模块学习并通过最终测试</text
              >
            </view>
          </view>
        </view> -->

        <!-- 培训总结 -->
        <view
          style="
            margin-top: 40rpx;
            padding: 30rpx;
            background: #fff9eb;
            border-radius: 12rpx;
            position: relative;
          "
        >
          <view style="position: absolute; right: 20rpx; top: -20rpx">
            <text
              class="cicon-star"
              style="color: #ff9900; font-size: 50rpx"
            ></text>
          </view>
          <view
            style="
              display: flex;
              align-items: center;
              gap: 15rpx;
              margin-bottom: 20rpx;
            "
          >
            <text
              class="cicon-summary"
              style="color: #cfab8e; font-size: 40rpx"
            ></text>
            <text style="font-size: 32rpx; color: #1a1a1a; font-weight: 600"
              >课程总结</text
            >
          </view>
          <p
            style="
              text-indent: 2em;
              color: #4f4e4e;
              line-height: 1.8;
              margin: 0;
            "
          >
            {{ detailData.summary }}
          </p>
        </view>
      </view>

      <!-- 教材资料 -->
      <!-- <view
        style="
          background: #fff;
          border-radius: 16rpx;
          /* padding: 30rpx; */
          margin-bottom: 30rpx;
          box-shadow: 0 4rpx 12rpx rgba(0, 82, 217, 0.1);
        "
      >
        <fui-section
          title="教材资料"
          line-width="3px"
          line-color="linear-gradient(to bottom , #0052d9 70%, #ff9900 90%)"
          isLine
          size="34"
          style="
            display: inline-block;
            padding: 0 10rpx;
            /* margin-bottom: 15rpx; */
            --fui-section-title-color: #1a1a1a;
            --fui-section-line-color: #19be6b;
          "
        />

        <view
          style="display: flex; flex-wrap: wrap; gap: 20rpx; margin-top: 30rpx"
        >
          <fui-tag
            v-for="(file, index) in detailData.materials"
            :key="index"
            :text="file.type"
            shape="circle"
            :type="
              file.type === '图片'
                ? 'warning'
                : file.type === '视频'
                ? 'danger'
                : 'primary'
            "
            style="margin-right: 10rpx; padding: 12rpx 24rpx"
          ></fui-tag>
        </view>
      </view> -->

      <!-- 注意事项 -->
      <!-- <view
        style="
          background: #fff;
          border-radius: 16rpx;
          padding: 40 0 rpx;
          margin: 30 0 rpx;
          border: 2rpx dashed #ecf5ff;
        "
      >
        <fui-section
          title="注意事项"
          line-width="3px"
          line-color="linear-gradient(to bottom , #0052d9 70%, #ff9900 90%)"
          isLine
          size="34"
          style="
            padding: 10 0rpx;
            --fui-section-title-color: #1a1a1a;
            --fui-section-line-color: #19be6b;
          "
        />
        <view style="margin-top: 30rpx; padding-inline: 20rpx">
          <view
            v-for="(notice, index) in detailData.notices"
            :key="index"
            style="
              display: flex;
              align-items: flex-start;
              gap: 15rpx;
              padding: 20rpx 0;
              border-bottom: 1rpx solid #f0f0f0;
            "
          >
            <text
              class="cicon-info"
              style="color: #ff9900; font-size: 36rpx"
            ></text>
            <text style="color: #4f4e4e; flex: 1">{{ notice }}</text>
          </view>
        </view>
      </view> -->
    </view>
  </s-layout>
</template>

<script setup>
import { ref, computed } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import sheep from "@/sheep";
const current = ref(0);
function onChange(e) {
  current.value = e.detail.current;
}
const detailData = ref({
  // title: "高层建筑火灾应急逃生专项培训",
  // status: "进行中",
  // type: "实操培训",
  // date: "2024-05-25",
  // startTime: "14:00",
  // endTime: "16:30",
  // content:
  //   "本次培训系统讲解了高层建筑火灾预防的核心要点，通过实物演示和VR模拟相结合的方式，使学员掌握消防设施操作、应急疏散路线规划等关键技能。课程特别强调实战演练，通过模拟真实火场环境提升学员的应急处置能力。",
  // summary:
  //   "本次培训参与度达100%，通过率92%。学员普遍反映实操环节设计合理，建议增加夜间应急演练模块。后续将根据反馈优化课程内容，计划每季度开展专项复训。",
  // address: "安恒大厦B座3层实训中心",
  // participants: "120人",
  // videos: ["https://ffa.firstui.cn/uploadfile/250218164127344.mp4"],
  // views: 385,
  // images: [
  //   "https://img1.baidu.com/it/u=2193194486,4036953863&fm=253&fmt=auto&app=120&f=JPEG?w=664&h=500",
  //   "https://img2.baidu.com/it/u=3346544749,3861342101&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500",
  // ],
  // outline:
  //   "火灾预防与隐患排查,消防设施操作实训,应急疏散路线规划,模拟火场逃生演练,伤员急救技能实操",
  // notices:
  //   "请提前15分钟到达培训场地,着便于活动的服装和防滑鞋,培训期间请遵守安全操作规程,身体不适者请提前告知工作人员",
  // lecturer: {
  //   name: "王安全",
  //   title: "消防安全高级培训师",
  //   avatar:
  //     "https://tse1-mm.cn.bing.net/th/id/OIP-C.YdNHqp4R3ZD8hv2gB9EIQQHaJ4?w=123&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7",
  //   tags: ["国家注册消防工程师", "10年培训经验", "应急管理专家"],
  // },
});
// const detailData = ref({
//   title: "",
//   status: "",
//   type: "",
//   date: "",
//   startTime: "",
//   endTime: "",
//   content: "",
//   summary: "",
//   address: "",
//   participants: "",
//   videos: [],
//   views: 0,
//   images: [],
//   outline: "",
//   notices: "",
//   lecturer: {
//     name: "",
//     title: "",
//     avatar: "",
//     tags: [],
//   },
// });
const pdfIconUrl = "https://cdnjs.cloudflare.com/ajax/libs/fatcow-icons/20130425/FatCow_Icons32x32/page_white_acrobat.png";
const wordIconUrl = "https://cdnjs.cloudflare.com/ajax/libs/fatcow-icons/20130425/FatCow_Icons32x32/page_white_word.png";
const excelIconUrl = "https://cdnjs.cloudflare.com/ajax/libs/fatcow-icons/20130425/FatCow_Icons32x32/page_white_excel.png";
const pptIconUrl = "https://cdnjs.cloudflare.com/ajax/libs/fatcow-icons/20130425/FatCow_Icons32x32/page_white_powerpoint.png";
const genericFileIconUrl = "https://cdnjs.cloudflare.com/ajax/libs/fatcow-icons/20130425/FatCow_Icons32x32/page_white.png";
const fileIcons = {
  default: genericFileIconUrl,
  pdf: pdfIconUrl,
  word: wordIconUrl,
  excel: excelIconUrl,
  ppt: pptIconUrl,
  image: genericFileIconUrl, // Assuming a generic icon for images if not specified
  video: genericFileIconUrl, // Assuming a generic icon for videos if not specified
  audio: genericFileIconUrl, // Assuming a generic icon for audio if not specified
  zip: genericFileIconUrl, // Assuming a generic icon for zip if not specified
  text: genericFileIconUrl, // Assuming a generic icon for text if not specified
};

const extractFileNameFromUrl = (url) => {
  if (!url) return "";
  try {
    const decodedUrl = decodeURIComponent(url);
    return decodedUrl.substring(decodedUrl.lastIndexOf("/") + 1);
  } catch (e) {
    console.error("Error decoding URL:", e);
    return url.substring(url.lastIndexOf("/") + 1); // Fallback for non-decodable URLs
  }
};

const extractFileTypeFromUrl = (url) => {
  if (!url) return "default";
  const fileName = extractFileNameFromUrl(url);
  const extension = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
  if (["doc", "docx"].includes(extension)) return "word";
  if (["xls", "xlsx"].includes(extension)) return "excel";
  if (["ppt", "pptx"].includes(extension)) return "ppt";
  if (["png", "jpg", "jpeg", "gif", "bmp", "webp"].includes(extension)) return "image";
  if (["mp4", "mov", "avi", "wmv", "flv"].includes(extension)) return "video";
  if (["mp3", "wav", "ogg"].includes(extension)) return "audio";
  if (["zip", "rar", "7z"].includes(extension)) return "zip";
  if (["txt", "md"].includes(extension)) return "text";
  if (extension === "pdf") return "pdf";
  return "default";
};

const getFileIcon = (fileType) => {
  return fileIcons[fileType] || fileIcons.default;
};

const openFile = (fileUrl) => {
  const fileName = extractFileNameFromUrl(fileUrl);
  // #ifdef H5
  window.open(fileUrl, "_blank");
  // #endif

  // #ifdef MP-WEIXIN
  uni.showLoading({
    title: "文件下载中...",
  });
  uni.downloadFile({
    url: fileUrl,
    success: (res) => {
      uni.hideLoading();
      if (res.statusCode === 200) {
        const filePath = res.tempFilePath;
        uni.openDocument({
          filePath: filePath,
          showMenu: true, // iOS上显示分享按钮
          success: (openRes) => {
            console.log("文件打开成功", openRes);
          },
          fail: (openErr) => {
            console.error("文件打开失败", openErr);
            uni.showToast({
              title: "文件打开失败",
              icon: "none",
            });
          },
        });
      } else {
        uni.showToast({
          title: "文件下载失败",
          icon: "none",
        });
      }
    },
    fail: (err) => {
      uni.hideLoading();
      console.error("文件下载失败", err);
      uni.showToast({
        title: "文件下载失败",
        icon: "none",
      });
    },
  });
  // #endif

  // #ifndef H5 || MP-WEIXIN
  // 其他平台，尝试保存到本地
  uni.showLoading({
    title: "文件处理中...",
  });
  uni.downloadFile({
    url: fileUrl,
    success: (res) => {
      if (res.statusCode === 200) {
        uni.saveFile({
          tempFilePath: res.tempFilePath,
          success: (saveRes) => {
            uni.hideLoading();
            uni.showToast({
              title: `文件已保存到: ${saveRes.savedFilePath}`,
              icon: "none",
              duration: 3000,
            });
            // 可选：提示用户如何打开文件，或尝试用其他方式打开
            // uni.openDocument({ filePath: saveRes.savedFilePath ... });
          },
          fail: (saveErr) => {
            uni.hideLoading();
            uni.showToast({
              title: "文件保存失败",
              icon: "none",
            });
          },
        });
      } else {
        uni.hideLoading();
        uni.showToast({
          title: "文件下载失败",
          icon: "none",
        });
      }
    },
    fail: (err) => {
      uni.hideLoading();
      uni.showToast({
        title: "文件下载失败",
        icon: "none",
      });
    },
  });
  // #endif
};

onLoad((options) => {
  console.log("options", options);
  const params = {
    tr_id: options.id,
    company_id: sheep.$store("user").userInfo.company_id,
  };
  sheep.$api.qy_security.detail(params).then((res) => {
    console.log("params", params);
    console.log("detail", res);
    detailData.value = res.data;
  });
});
</script>

<style lang="scss" scoped>
.banner-wrap {
  height: 360rpx;

  .banner-image {
    width: 100%;
    height: 100%;
  }
}
.card {
  background-color: #ffffff;
  border-radius: 10rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  padding: 20rpx; /* 可根据需要调整内边距 */
}

/* 公共变量 */
:root {
  --primary-color: #0052d9;
  --secondary-color: #ff9900;
  --title-color: #1a1a1a;
  --text-color: #4f4e4e;
}

.lecturer-card {
  position: relative;
  overflow: visible;
  transition: transform 0.3s ease;

  &:active {
    transform: scale(0.98);
  }
}

.lecturer-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 32rpx;
}

.avatar-container {
  padding-top: 30rpx;
  position: relative;
  flex-shrink: 0;
}

.lecturer-avatar {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  border: 4rpx solid #fff;
  box-shadow: 0 8rpx 24rpx rgba(0, 82, 217, 0.15);
  background: linear-gradient(135deg, #ecf5ff, #d4e3ff);
}

.expert-badge {
  position: absolute;
  right: -8rpx;
  bottom: -8rpx;
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background: var(--secondary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3rpx solid #fff;
  box-shadow: 0 4rpx 12rpx rgba(255, 153, 0, 0.2);
}

.title-wrapper {
  margin-bottom: 24rpx;
  position: relative;
  padding-left: 24rpx;

  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6rpx;
    height: 60%;
    background: var(--primary-color);
    border-radius: 4rpx;
  }
}

.name {
  display: block;
  font-size: 36rpx;
  font-weight: 600;
  color: var(--title-color);
  line-height: 1.4;
}

.title {
  display: block;
  font-size: 28rpx;
  color: var(--text-color);
  margin-top: 8rpx;
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-top: 20rpx;
  // display: flex;
  // flex-wrap: wrap;
  // gap: 20rpx;
  // position: relative;
}

/* 新增动效 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lecturer-card {
  animation: fadeIn 0.6s ease both;
}

.tag-item {
  position: relative;
  padding: 6rpx 5rpx;
  border-radius: 48rpx;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.9),
    rgba(245, 248, 255, 0.9)
  );
  border: 1rpx solid rgba(0, 82, 217, 0.1);
  backdrop-filter: blur(8rpx);
  box-shadow: 0 4rpx 16rpx rgba(0, 82, 217, 0.08);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  align-items: center;
  overflow: hidden;
  cursor: pointer;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 60%;
    background: linear-gradient(45deg, var(--tag-accent), transparent 70%);
    opacity: 0.15;
    z-index: 1;
  }
}

.tag-icon {
  font-size: 23rpx;
  color: var(--tag-accent);
  margin: 0 12rpx;
  text-shadow: 0 2rpx 4rpx rgba(0, 82, 217, 0.1);
  transition: transform 0.3s ease;
}
.video-list-container {
  margin-top: 40rpx;
  margin-bottom: 20rpx;
  border-radius: 16rpx;
  padding: 20rpx;
}

.video-scroll-view {
  white-space: nowrap;
  width: 100%;
  height: 360rpx; /* 根据实际视频高度调整 */
}

.video-item {
  display: inline-block;
  width: 80%; /* 可根据需要调整视频宽度，允许多个视频并排显示 */
  height: 100%;
  margin-right: 20rpx;
  border-radius: 10rpx;
  overflow: hidden;
}

.video-item video {
  width: 100%;
  height: 100%;
  border-radius: 16rpx;
}

.empty-video .empty-text,
.empty-file .empty-text {
  text-align: center;
  color: #999;
  padding: 40rpx 0;
  font-size: 28rpx;
}

.file-check-container {
  margin-top: 30rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
}

.file-list {
  margin-top: 10rpx;
}

.file-item {
  display: flex;
  align-items: center;
  padding: 20rpx 10rpx;
  border-bottom: 1rpx solid #f0f0f0;
  transition: background-color 0.2s;
}

.file-item:last-child {
  border-bottom: none;
}

.file-item:active {
  background-color: #f5f5f5;
}

.file-icon {
  width: 64rpx;
  height: 64rpx;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.file-name {
  font-size: 28rpx;
  color: #333;
  word-break: break-all;
  flex-grow: 1;
}
</style>
